<template>
  <view class="special-add">
    <view class="add-avatar">
      <view class="avatar-img">
        <view class="img-title">头像
          <view style="color:#FF5353 ;">*</view>
        </view>
        <view class="avatar-image">
          <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" uploadIcon="plus"
            :deletable='false' :maxCount="1"></u-upload>
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
      <view class="avatar-name">
        <view class="name-title">名称
          <view style="color:#FF5353 ;">*</view>
        </view>
        <view class="name-input">
          <u--input placeholder="请输入名称" border="none" inputAlign="right" v-model="name" @change="change"></u--input>
        </view>
      </view>
    </view>
    <view class="add-code">
      <view class="code-top">
        <view class="code-title">邀请码
          <view style="color:#FF5353 ;">*</view>
        </view>
        <view class="code-input">
          <u--input placeholder="请输入邀请码" border="none" inputAlign="right" v-model="code" @change="change"></u--input>
        </view>
      </view>
      <view class="code-text">您可以向客服索要邀请码</view>
    </view>
    <view class="add-phone">
      <view class="phone-title">专栏联系方式
        <view style="color:#FF5353 ;">*</view>
      </view>
      <view class="phone-input">
        <u--input placeholder="请输入联系方式" border="none" inputAlign="right" v-model="phone" @change="change"></u--input>
      </view>
    </view>
    <view class="add-notes">
      <view class="notes-row">内容与服务</view>
      <u--textarea v-model="notes" height="330rpx" placeholder="请简单描述提供的内容与服务。"></u--textarea>
    </view>
    <view class="add-btn">
      <u-button text="确认创建" color="#2F7EFC" @click="onConmit"></u-button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        name: '',
        notes: '',
        phone: '',
        code: '',
        fileList: []
      }
    },
    methods: {
      onConmit(){
        uni.navigateTo({
          url:'/pages/specialColumnPage/expertPage/expert-discount'
        })
      },
      
      
      // 删除图片
      deletePic(event) {
        this.fileList.splice(event.index, 1)
      },
      // 新增图片
      async afterRead(event) {
        console.log(event, 11111);
        // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
        let lists = [].concat(event.file)
        console.log(lists, 22222);
        let fileListLen = this.fileList.length
        lists.map((item) => {
          this.fileList.push({
            ...item,
            status: 'uploading',
            message: '上传中'
          })
        })
        console.log(lists, 33333);
        for (let i = 0; i < lists.length; i++) {
          const result = await this.uploadFilePromise(lists[i].url)
          console.log(result, 44444);
          let item = this.fileList[fileListLen]
          this.fileList.splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            url: result
          }))
          fileListLen++
        }
      },
      uploadFilePromise(url) {
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: 'https://taichi.chintanneng.com/maximobiz/api/maximo/app/fileUpload', //todo 更换上传图片接口地址，上传参数
            filePath: url,
            name: 'file',
            formData: {
              user: 'test'
            },
            success: (res) => {
              setTimeout(() => {
                resolve(res.data.data)
              }, 1000)
            }
          });
        })
      },
    }
  }
</script>

<style lang="less" scoped>
  .special-add {
    box-sizing: border-box;
    padding-top: 30rpx;
  }

  .add-avatar {
    background-color: #fff;
    padding: 0 40rpx;
    width: 100%;
    height: 304rpx;
    box-sizing: border-box;

    .avatar-img {
      height: 188rpx;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 2px solid #E6E6E6;

      .img-title {
        display: flex;
        font-size: 36rpx;
        font-weight: 500;
        line-height: 50rpx;
        color: #909090;
      }

      .avatar-image {
        display: flex;
        align-items: center;

        image {
          width: 118rpx;
          height: 118rpx;
          border-radius: 10rpx;
          margin-right: 40rpx;
        }
      }
    }

    .avatar-name {
      height: 116rpx;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .name-title {
        display: flex;
        font-size: 36rpx;
        font-weight: 500;
        line-height: 50rpx;
        color: #909090;
      }
    }
  }

  .add-code {
    width: 100%;
    height: 176rpx;
    background: rgba(255, 255, 255);
    box-shadow: 0rpx 2rpx 20rpx rgba(161, 161, 161, 0.16);
    margin-top: 30rpx;
    padding: 20rpx 40rpx;
    box-sizing: border-box;

    .code-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 82rpx;

      .code-title {
        display: flex;
        font-size: 36rpx;
        font-weight: 500;
        line-height: 50rpx;
        color: #909090;
      }
    }

    .code-text {
      font-size: 28rpx;
      font-weight: 500;
      color: #909090;
    }
  }

  .add-phone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 750rpx;
    height: 110rpx;
    background: rgba(255, 255, 255);
    box-shadow: 0rpx 2rpx 20rpx rgba(161, 161, 161, 0.16);
    margin-top: 10rpx;
    box-sizing: border-box;
    padding: 0 40rpx;

    .phone-title {
      display: flex;
      font-size: 36rpx;
      font-weight: 500;
      line-height: 50rpx;
      color: #909090;
    }
  }

  .add-notes {
    width: 100%;
    background: rgba(255, 255, 255);
    box-shadow: 0rpx 2rpx 20rpx rgba(161, 161, 161, 0.16);
    margin-top: 10rpx;
    box-sizing: border-box;
    padding: 10rpx 40rpx 40rpx;

    .notes-row {
      font-size: 36rpx;
      font-weight: 500;
      color: #909090;
      height: 90rpx;
      line-height: 90rpx;
    }
  }

  /deep/ .u-textarea {
    background-color: #F5F5F5 !important;
  }

  .add-btn {
    width: 100%;
    height: 154rpx;
    background: rgba(255, 255, 255);
    box-shadow: 0rpx 2rpx 20rpx rgba(0, 0, 0, 0.16);
    box-sizing: border-box;
    padding: 30rpx 62rpx;
    display: flex;
    align-content: center;
    position: fixed;
    bottom: 0;
    left: 0;
  }
  /deep/ .u-button__text{
    font-size: 36rpx !important;
  }
</style>